<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <c:set value="${pageContext.request.contextPath}" var="basePath"></c:set>
	<jsp:include page="include/head.jsp"></jsp:include>
	<jsp:include page="include/js.jsp"></jsp:include>
  </head>
  <body>
	
    <div id="login-data">
    	Session:&nbsp;<span id="user_name">${user.name} ${user.lastname}</span>
    	<a id="icon-signout" href="${basePath}/logout"><i class="icon-signout"></i></a>
    </div>
    
    <c:if test="${alert eq 'success'}">
	    <div class="alert alert-success alert-dismissable">
			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
			<strong>Success.</strong> The students have been successfully assigned to the subject. 
		</div>
	</c:if>
	
    <c:if test="${alert eq 'error'}">
	    <div class="alert alert-danger alert-dismissable">
			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
			<strong>Error.</strong> The students couldn't be assigned successfully to the subject.
		</div>
	</c:if>
	    
    
    <div id="container" class="container">
        <div id="row" class="row panel">
    		<legend>Subject students</legend>
        	<table style="width: 100%;">
        		<tr>
        			<td style="vertical-align: top;">
        				 <ul id="users-list">
        				 	<c:if test="${empty students}">
        				 		<li>List of students is empty</li>
        				 	</c:if>
			                <c:forEach var="student" items="${students}">
			                	<li>${student.name} ${student.lastname}</li>
			                </c:forEach>
		                </ul>
        			</td>
        			<td>
        				<legend style="font-size: 18px;">Add students</legend>
        				<div id="student-mail-fields">
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        					<input type="text" class="form-control" placeholder="Student email"/><br/>
        				</div>
        				<div>
        					<span class="btn btn-mini" id="add-more-studdents-button">Add more students</span>
        				</div>
        				<div style="margin-top: 25px;">
        					<form id="submit-students-form" action="${basePath}/registerSubjectVersionUsers/${subjectVersion.id}" method="POST">
        						<input type="hidden" name="students_mails_json" id="students_mails_json" value=""/>
        						<div class="btn-group btn-group-lg">
	        						<input type="submit" class="btn btn-primary" value="Accept"/>
	        						<input type="button" class="btn btn-default" value="Go back" id="go-back-button"/>
	        					</div>
        					</form>
        				</div>
        			</td>
        		</tr>
        	</table>
        	
        </div>
    </div>
    
    <script>
      $(function() {
    	  
    	  $('#submit-students-form').submit(function(){
    		  var mails = "";
    		  $('#student-mail-fields').children('input').each(function(index, elem){
    			 mails = mails + $(this).val() + ","; 
    		  });
    		  $('#students_mails_json').val(mails);
    		  return true;
    	  });
    	  
          $('#go-back-button').click(function(){
        	  window.location = '${basePath}/subjectVersionSelection/';
          });
          
          $('#add-more-studdents-button').click(function(){
        	  for ( var i = 0; i < 5; ++i )
        	  	$('#student-mail-fields').append('<input type="text" class="form-control" placeholder="Student email"/><br/>');
          });
          
      });
    </script>
    
  </body>
</html>
